<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		#hightlightbutton1{
			background-color: initial;
			border-color: #ccc;
		}
		#hightlightbutton1:active{
			background-color: gold;
			border-color: #fff;
		}
		#hightlightbutton2{
			background-color: initial;
			border-color: #ccc;
		}
		#hightlightbutton2:active{
			background-color: greenyellow;
			border-color: #fff;
		}
		#hightlightbutton3{
			background-color: initial;
			border-color: #ccc;
		}
		#hightlightbutton3:active{
			background-color: skyblue;
			border-color: #fff;
		}
	</style>
	<body>
		<button id="hightlightbutton1">点击1</button>
		<button id="hightlightbutton2">点击2</button>
		<button id="hightlightbutton3">点击3</button>
		<script>
			document.getElementById('hightlightbutton1').addEventListener('mouseup',function(){
				this.style.backgroundColor = 'initial';
			});
			document.getElementById('hightlightbutton2').addEventListener('mouseup',function(){
				this.style.backgroundColor = 'initial';
			});
			document.getElementById('hightlightbutton3')addEventListener('mouseup',function(){
				this.style.backgroundColor = 'initial';
			});
		</script>
	</body>
</html>